<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath %>">
		<meta charset="utf-8">
		<title>物流订单系统</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href=css/bootstrap.min.css>
		<style type="text/css">
			div.image{
				width:150px;
				float:left;
				opacity:.5;
			}
			div.selected{
				opacity:1;
			}
			.image img{
				width:100%;
			}
		</style>
		<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0rdo14pf61sT5rIij9IQEUYzbgIHF6Tl"></script>
		<script>
			$(function(){
				$("div.image").click(function(){
					$("#cartype").val($(this).attr("data-id"));
					$(this).addClass("selected").siblings().removeClass("selected");
					
				});

				var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
						{"input" : "start"
					});
				var bc = new BMap.Autocomplete(    //建立一个自动完成的对象
						{"input" : "dest"
					});
			});
		</script>
	</head>
	<body >
		<%@include file="/header.jsp" %>
		<div class="container">
		<h1>在线下单</h1>
		<hr />
		<form class="form-horizontal" method="post" action="order/add">
		<input type="hidden" name="users.id" value="${sessionScope.login_user.id }"/>
		<div class="bg-warning form-group" style="padding:15px;">选择车型</div>
		<div style="border:1px dashed #ccc;padding:15px;margin-bottom:10px;">
			<c:forEach items="${carTypes }" var="type">
				<div class="image" data-id="${type.id }">
					<img src="${type.image }" alt="" />
					<p class="text-center">${type.name }</p>
				</div>
			</c:forEach>
			<input type="hidden" name="carType.id" id="cartype"/>
			<div style="clear:both;"></div>
		</div>
		<div class="bg-warning form-group" style="padding:15px;">输入起点、目的地（必填）</div>
		  <div class="form-group">
		    <div class="col-sm-12">
		      <input type="text" class="form-control" id="start" name="start" placeholder="按此输入起点">
		    </div>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-12">
		      <input type="text" class="form-control" id="dest" name="dest" placeholder="按此输入目的地">
		    </div>
		  </div>
		  <div class="bg-warning form-group" style="padding:15px;">额外需求</div>
		  <div class="form-group">
		    <div class="col-sm-12">
		      <input type="text" class="form-control" id="inputEmail3" name="extra" placeholder="添加额外需求，例如需要搬运，小推车等">
		    </div>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-12">
		    		<textarea name="remark" class="form-control" rows="4" placeholder="备注：可填写注意事项，例如行驶时间、路线等"></textarea>
		    </div>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <button type="submit" class="btn btn-primary">现在用车</button>
		    </div>
		  </div>
		</form>
		</div>
	</body>
</html>
